<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML 标签元素
        </title>
    </head>
    <body>
        <h1>1. 标题</h1>
        <p>
            标题分为h1至h6
            <h1>h1</h1>
            <h2>h2</h2>
            <h3>h3</h3>
            <h4>h4</h4>
            <h5>h5</h5>
            <h6>h6</h6>
        </p>
        <h1>2. 段落</h1>
        <p>
            p标签代表段落，使用p标签，会自动换行
            <p>1</p>
            <p>2</p>
        </p>
        <h1>3. 粗体</h1>
        <p>
            粗体效果 b 标签 和 strong 标签<br>
            <b>b 标签加粗</b>
            <br>
            <strong>strong 标签加粗</strong>
            <p>无加粗</p>
        </p>
        <h1>4. 斜体</h1>
        <p>
            斜体使用 i标签 或 em标签<br>
            <i>i标签斜体</i>
            <br>
            <em>em标签斜体</em>
            <br>
            <b><em>同时斜体 加 粗体</em></b>
        </p>
        <h1>5. 预格式</h1>
        <p>
            pre 标签预格式 可以展示代码
            <pre>
                var a = 123
                var b = 23
                var c = a - b 
            </pre>
        </p>
        <h1>6. 删除效果</h1>
        <p>
            del 标签具有删除效果<br>
            <del>删除这行内容</del>
        </p>
        <h1>7. 下划线</h1>
        <p>
            下划线效果 使用 ins 标签 <br>
            <ins>这行内容具有下划线</ins>
        </p>
        <h1>8. 图像</h1>
        <p>
            img 图像标签
            <img  src="./wx.jpg" alt="wx QR">

            img 大小设置
            <img width="150" height="150" src="./wx.jpg" alt="wx QR">

            块元素可设置居中，img 自己无法居中，所以需要一个块元素包裹并设置居中，如div，p，h1等
            <div align="center">
                div 块 图片居中<br>
                <img src="./wx.jpg" alt="">
            </div>
            <div align="left">
                    div 块 图片居左<br>
                    <img src="./wx.jpg" alt="">
            </div>
            <div align="right">
                    div 块 图片居右<br>
                    <img src="./wx.jpg" alt="">
            </div>   
            <h1 align="center">
                h1 图片居中<br>
                <img src="./wx.jpg" alt="">
            </h1>     

        </p>
        <h1>9. 超链接</h1>
        <p>
            a标签为超链接标签
            <a href="http://lianqiujun.co">链求君</a> <br>
            <a href="http://www.baidu.com" title="加title属性会提示文字" target="_blank">加target属性, _blank 打开新窗口</a>

            <a href="http://lianqiujun.co">
                <img src="./wx.jpg" alt="">
            </a>
        </p>
        <h1>10. 表格</h1>
        <p>
            <table border="1" width='250px'>
                <tr>
                    <td  width='50px'>1</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>A</td>
                    <td>B</td>
                </tr>
            </table>

            <table border="1" width='250px'>
                    <tr>
                        <td  width='50%'>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>A</td>
                        <td>B</td>
                    </tr>
                </table>

                <table border="1" width='250px' align="center">
                        <tr>
                            <td  width='50%' align="center">1</td>
                            <td align="center">2
                                <br>
                                3
                                <br>
                                4
                            </td>
                        </tr>
                        <tr>
                            <td align="center">A</td>
                            <td align="center">B
                                <br>
                                C 
                                <br>
                                D
                                <br>
                            </td>
                        </tr>
                    </table>
                
                    <table border="1" width='250px' align="center">
                            <tr>
                                <td  width='50%' valign="top">1</td>
                                <td valign="top">2
                                    <br>
                                    3
                                    <br>
                                    4
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">A</td>
                                <td valign="top">B
                                    <br>
                                    C 
                                    <br>
                                    D
                                    <br>
                                </td>
                            </tr>
                            <tr bgcolor="gray">
                                <td colspan="2">
                                    合并
                                </td>
                            </tr>
                        </table>
        </p>
        <h1>11. 列表</h1>
        <p>
            有序列表 <br>
            <ol>
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
            </ol>

            无序列表 <br>
            <ul>
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
                <li>ddd</li>
            </ul>
        </p>
        <h1>12. 块</h1>
        <p>
            <span>this is span</span>
            <div>this is div</div>
        </p>
        <div style="width:300px;height:300px;background-color:aqua;">
            <img style="width:50px;height:50px;margin-left:50px;"   src="./wx.jpg" alt="">
            <br>
            <img style="width:50px;height:50px;margin-left:100px;"  src="./wx.jpg" alt="">
        </div>
   
        <h1>13. 内联框架</h1>
        <p>
            <iframe src="http://lianqiujun.co" width="500px" height="800px" frameborder="0"></iframe>
        </p>

    </body>
</html>